<template>
	<view class="content">
		<div v-if="pageInfo.length>0">
			<view class="panel-top">
				<view class="main-card">
					<view class="main-card-row1">
						<view class="">
							<span>{{evenNum}}</span>
							<span>发现攻击事件数</span>
						</view>
						<view class="">						
						</view>					
					</view>
				</view>
			</view>
			<view class="main-bg" >
				<view class="card-title">
					攻击事件记录({{evenNum}})
				</view>
				<scroll-view scroll-y="true" :style="{height: tableHeight + 'px' }" @scrolltolower="lower">
					<view class="card" style="flex-wrap: wrap;" v-for="(item, index) in pageInfo" :key="index">
						<view class="left-logo">
							<img v-if="btnFlag === '1'" style="width: 64rpx;" src="@/static/personIcon3.png" alt="" />
							<img v-else style="width: 64rpx;" src="@/static/evenIcon.png" alt="" />
						</view>
						<view class="right-content">
							<view class="row1">
								<span style="font-size: 28rpx;">{{item.collect_date}}</span>
								<span class="small-card red">{{item.disposal_status}}</span>
							</view>
						</view>
						<view class="mian-row">
							<view class="">
								<span>{{item.attack_description}}</span>
							</view>
						</view>
					</view>
					<u-loadmore :status="status"></u-loadmore>
				</scroll-view>
			</view>
		</div>
        <u-empty  v-else iconSize='200' style="margin-top: 100px;" textSize='18' mode="data" icon="@/static/empty.png" text='暂无数据'></u-empty>
		<!-- 	<view class="empty" v-else>
				<img style="width: 380rpx;" src="@/static/empty.png" alt="" />
			</view> -->

	</view>
</template>

<script>
	import $ from 'common/utils/jquery-3.5.1.min.js'
	export default {
		data() {
			return {
				assetInfo: [
					{
						deptName: 'IDC互联网部'
					},
					{
						deptName: 'IT支撑网部'
					},
					{
						deptName: 'IDC核心网部'
					},
				],
				btnFlag: '2',
				pageInfo: [
					// {
					// 	collect_date: "2024-05-08 00:00:00",
					// 	disposal_statu: "未处置",
					// 	business_name: "网管中心/自研卓望B2B CDN金银湖4楼互联网机房地址",					
					// },
					// {},
					// {},
					// {},{
					// 	collect_date: "2024-05-08 00:00:00",
					// 	disposal_statu: "未处置",
					// 	business_name: "网管中心/自研卓望B2B CDN金银湖4楼互联网机房地址",					
					// },{
					// 	collect_date: "2024-05-08 00:00:00",
					// 	disposal_statu: "未处置",
					// 	business_name: "网管中心/自研卓望B2B CDN金银湖4楼互联网机房地址",					
					// },
				],
				evenNum:'',
				// 每页数据量
				pageSize:5,
				// 当前页
				pageCurrent: 1,
				// 数据总量
				total: 0,
				status: 'loadmore',
				tableHeight:'',
				title: '数据统计',
			};
		},
		created () {
		     this.getLogsSecurityAuditTotal()
			 this.getList(this.pageCurrent)
			 this.tableHeight=$(window).height() -280
		},
		onReachBottom() {
		   // this.pageCurrent += 1;
		   // console.log(this.pageCurrent,'this.page999')
		   // this.getAttackPageList(this.pageCurrent)
		},
		activated() {
			this.changeTitle('数据统计')
		},
		// 组件能被调用必须是组件的节点已经被渲染到页面上
		methods: {
			changeTitle(newTitle) {
			  this.title = newTitle;
			  uni.setNavigationBarTitle({
				title: this.title
			  });
			},
			lower(e){
				 this.pageCurrent += 1;
				console.log(this.pageCurrent,'this.pageInfo999')
				this.getAttackPageList(this.pageCurrent)
			},
			handleBtnClick(flag) {
				this.btnFlag = flag
			},
			async getLogsSecurityAuditTotal() {//管理员-查看事件总数
				let data = await this.$api.getAttackLogsSecurityAuditTotal(); //已经封装好的api
				if (data.Code == 200) {
					// this.loading = false
					this.evenNum=data.Data	
					this.pageShow=1	
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}
			},
			async getList(pageCurrent) {//管理员查看事件分页
				if(this.status=='loading'){
					return false
				}
				if(this.status=='nomore'){
					return false
				}
			   let  params=`?PageIndex=${pageCurrent}`+`&PageSize=${this.pageSize}`
				let data = await this.$api.getAttackPageList(params); //已经封装好的api
				if (data.Code == 200) {
					this.pageInfo=this.pageInfo.concat(data.Data.rows)
					if(data.Data.total>5){						
						this.status='loadmore'
					}else{
						this.status='nomore'
					}

				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}
			},
			async getAttackPageList(pageCurrent) {//管理员查看事件分页
				if(this.status=='loading'){
					return false
				}
				if(this.status=='nomore'){
					return false
				}
			   let  params=`?PageIndex=${pageCurrent}`+`&PageSize=${this.pageSize}`
				let data = await this.$api.getAttackPageList(params); //已经封装好的api
				if (data.Code == 200) {
					this.pageInfo=this.pageInfo.concat(data.Data.rows)

						if(this.pageInfo.length>=data.Data.total){

							this.status='nomore'							
						}else{
							console.log(this.pageInfo.length,'this.pageInfo.length99')
							console.log(data.Data.total,'data.Data.total99')
							this.status='loadmore'
						}
					// alert(99)
					// this.status='loadmore'

					//  if(this.pageInfo.length>=data.Data.total){
						 
					//     this.status='nomore'
					// }
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
.main-card-row1 {
	border-radius: 16rpx 16rpx 0 0;
	background: linear-gradient(270deg, #1078DE 0%, #5FBAF2 100%);
	display: flex;
	justify-content: space-evenly;
	
	&>view {
		flex: 1;
		padding: 37rpx 0 31rpx 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		&>span:first-child {
			font-weight: 700;
			// font-size: 50rpx;
			margin-bottom: 5rpx;
			font-size: 16px;
		}
		&>span:last-child {
			font-size: 24rpx;
		}
	}
}
.main-card-row2 {
	border-radius: 0 0 16rpx 16rpx;
	box-shadow: 0rpx 30rpx 20rpx 1rpx rgba(51,149,231,0.26);
	background: linear-gradient(270deg, #1078DE 0%, #43A2EA 100%);
	display: flex;
	justify-content: space-evenly;
	.row2-left, .row2-right {
		flex: 1;
		display: flex;
		
		&>view {
			flex: 1;
			overflow: hidden;
			white-space: nowrap; /* 确保文本在一行内显示 */
			padding: 28rpx 0 39rpx 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			
			&>span:first-child {
				width: 100%;
				overflow: hidden; /* 确保超出容器的文本被裁剪 */
				white-space: nowrap; /* 确保文本在一行内显示 */
				text-overflow: ellipsis; /* 超出部分显示为省略号 */
				text-align: center;
				font-weight: 700;
				margin-bottom: 5rpx;
				font-size: 16px;
			}
			&>span:last-child {
				font-size: 24rpx;
				color: rgba(255, 255, 255, .8);
			}
		}
	}
}
.btn-group {
	display: flex;
	padding: 0 30rpx;
	margin-bottom: 22rpx;
	&>view:first-child {
		margin-right: 20rpx;
	}
}
.btn {
	width: 100%;
	text-align: center;
	background: #FFFFFF;
	border-radius: 30rpx 30rpx 30rpx 30rpx;
	border: 1rpx solid #A7ABBB;
	padding: 12rpx 0;
	color: #A7ABBB;
	font-size: 26rpx;
}
.btn-select {
	color: #fff;
	background-color: #1B9CFF;
	border: 0;
}

.dept-name {
	display: flex;
	align-items: center;
	padding: 25rpx 0 32rpx 30rpx;
}
.dept-content {
	margin-left: 30rpx;
	.dept-title {
		font-size: 34rpx;
		margin-bottom: 5rpx;
	}
	.dept-details {
		color: #A7ABBB;
		&>span {
			margin-right: 20rpx;
		}
	}
}
.empty {
	text-align: center;
	margin-top: 150rpx;
}
.main-card-row1{
	border-radius: 9px !important;
	background:url(@/static/evenBg.jpg);
	background-size: 100%;
}
.main-card-row1 > uni-view > span:first-child {
    font-weight: 700;
    margin-bottom: 2px;
    font-size: 24px!important;
	color: red;
}
.main-card-row1 > uni-view {
    padding: 32px 0 32px 0!important;
}
.card {
	padding: 20rpx 30rpx;
	display: flex;
    margin: 0 0 16px;
	.left-logo {
		margin-right: 30rpx;
	}
}

.right-content {
	flex: 1;

	.row1 {
		display: flex;
		justify-content: space-between;
		padding-top: 8rpx;
		padding-bottom: 20rpx;


	}

}
	.mian-row {
		width: 100%;
		background: #F4F6F8;
		border-radius: 8rpx;
		display: flex;
		padding: 16rpx 0 22rpx;
		&>view{
			flex: 1;
			text-align: center;
			
			&>span:first-child {
				font-size: 24rpx;
				color: #8F8E94;
			}
			
			&>span:last-child {
				text-align: right;
				font-weight: 700;
			}
		}
	}
	.mian-row > uni-view {
	    flex: 1;
	    text-align: left !important;
	    padding: 0 10px!important;
	}
	.card .left-logo {
	    margin-right: 6px;
	}
	.card-title{
		font-size: 20px;
		color: #5F6475;
		font-weight: 700;
		padding-top: 0;
	}
</style>